<template>
  <div class="listers">
    <div class="tap-had">
      <div class="haderd">
        <span class="el-icon-document">筛选查询</span>
        <span class="jine">本页金额合计:{{ getMoney }}元</span>
        <el-button class="top-btn" @click="QueryResuilts">查询结果</el-button>
      </div>
    </div>
    <div class="bottmer">
      <el-form :inline="true" :model="formInline" class="demo-form-inline shuru">
        <el-form-item>

          <div class="block">
            <span class="demonstration">创建时间：</span>
            <el-date-picker v-model="value1" type="datetimerange" range-separator="至" start-placeholder="开始日期"
              end-placeholder="结束日期" style="width:200px;">
            </el-date-picker>
          </div>
        </el-form-item>
        <el-form-item>
          <span>销售类型：</span>
          <el-select v-model="formInline.sale" placeholder="全部">
            <el-option v-for="item in selected" :key="item.value" :value="item">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <span>订单类型：</span>
          <el-select v-model="formInline.list" placeholder="全部">
            <el-option v-for="item in dingdan" :key="item.value" :value="item">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <span>客户类型：</span>
          <el-select v-model="formInline.customer" placeholder="全部">
            <el-option v-for="item in kehu" :key="item.value" :value="item">
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
    </div>

    <div class="dindanlist">
      <div class="list-nav">
        <span class="el-icon-s-operation">数据列表</span>
        <div class="nav-right">
          <el-button class="list-btn1">
            <router-link to="/dingdan/add-list">添加</router-link>
          </el-button>
          <el-button class="list-btn2" @click="Export">导出</el-button>
          <el-select v-model="sortData" placeholder="排序" @change="sortClick" style="padding-left:10px;width:120px;">
            <el-option class="options" value="升序"></el-option>
            <el-option class="options" value="降序"></el-option>
          </el-select>
        </div>
      </div>
      <div class="list-top">
        <div class="list-content">
          <el-table ref="multipleTable" :data="DindanList" border tooltip-effect="dark" style="width: 100%">
            <el-table-column type="selection" width="55"> </el-table-column>
            <el-table-column prop="id" label="编号" width="80">
            </el-table-column>
            <el-table-column prop="sellType" label="销售类型" width="80">
            </el-table-column>
            <el-table-column prop="money" label="金额合计" width="100">
            </el-table-column>
            <el-table-column prop="createTime" label="创建日期" width="200">
            </el-table-column>
            <el-table-column prop="orderType" label="订单类型" width="80">
            </el-table-column>
            <el-table-column prop="clientType" label="客户类型" width="80">
            </el-table-column>
            <el-table-column prop="clientName" label="客户名称" width="80">
            </el-table-column>
            <el-table-column prop="salesman" label="业务员" width="80">
            </el-table-column>
            <el-table-column prop="wareHouse" label="出库仓库" width="80">
            </el-table-column>
            <el-table-column prop="car" label="配送车辆" width="80">
            </el-table-column>
            <el-table-column label="操作">
              <template slot-scope="scope">
                <el-button type="text" class="brand-edit" @click="editList(scope.row)">编辑</el-button>
                <el-button type="text" class="brand-look" @click="lookList(scope.row.id)">查看</el-button>
                <el-button type="text" class="brand-del" @click="handleDelete(scope.row.id)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
    </div>
    <div class="list-foot">
      <el-pagination @current-change="currentchange" :current-page="page" layout="prev, pager, next" :total="total"
        class="footer">
      </el-pagination>
    </div>
  </div>

</template>

<script>

import { getDindanList, delDindanApi, OptionsApi, sortApi, QueryApi, ExportApi } from "@/http/xiaoShou/dinDan";

import { fileExport } from '@/util/export';

export default {
  name: 'XiaoShouList',
  data() {
    return {
      DindanList: [],
      page: 1,
      size: 10,
      total: 0,
      value1: '',
      // limit:10,
      formInline: {
        sale: '',
        list: '',
        customer: ''
      },
      multipleSelection: [],
      selected: [],
      dingdan: [],
      kehu: [],
      sortData: "",
      query: false,
    }
  },
  updated() {
    console.log('时间', this.value1)
  },
  activated() {
    this.geiInit(this.page, this.size);
    this.inIt();
  },
  // created() {
  //   this.geiInit(this.page, this.size);
  //   this.inIt();
  // },
  methods: {
    //排序查询
    sortClick() {
      if (this.query) {
        if (this.sortData == "升序") {
          this.DindanList.sort((a, b) => +a.id - +b.id)
        } else {
          this.DindanList.sort((a, b) => +b.id - +a.id)
        }
        return
      }
      sortApi(this.page, this.size, this.sortData)
        .then(res => {
          console.log(res)
          this.DindanList = res.data.data
        })
        .catch(err => {
          console.log('获取列表失败：', err);
        });
    },
    //筛选查询
    inIt() {
      OptionsApi()
        .then(res => {
          let data = res.data.data;
          console.log(data)
          for (let item of data) {
            this.selected.push(item.sellType)
            this.dingdan.push(item.orderType)
            this.kehu.push(item.clientType)
          }
          this.selected = [...new Set(this.selected)]
          this.dingdan = [...new Set(this.dingdan)]
          this.kehu = [...new Set(this.kehu)]
        })
        .catch(err => {
          console.log('获取失败：', err);
        });
    },
    //查询
    QueryResuilts() {
      console.log('1111')
      QueryApi(this.value1[0], this.value1[1], this.formInline.sale, this.formInline.list, this.formInline.customer)
        .then(res => {
          console.log(res)
          this.DindanList = res.data.data
          this.query = true
        })
        .catch(err => {
          console.log('获取列表失败：', err);
        });
    },


    //导出
    Export() {
      ExportApi()
        .then(res => {
          console.log(res)
          fileExport(res.data, "订单")
        })
        .catch(err => {
          console.log('获取列表失败：', err);
        });
    },
    //编辑
    editList(row) {
      this.$router.push({ path: 'add-list', query: { row } })
    },
    //查看
    lookList(id) {
      this.$router.push({ path: '/dingdan/list', query: { id: id } })
    },
    //删除列表
    handleDelete(id) {
      console.log("删除id:", id);
      this.$confirm("此操作将永久删除该数据, 是否继续?", "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "error",
      })
        .then((res) => {
          console.log(res)

          delDindanApi(id)
            .then((res) => {
              console.log(res);

            })
          //删除提示
          this.$message({
            type: 'success',
            message: '删除成功'
          })
          this.geiInit(this.page, this.size);
        })

        .catch((err) => {
          console.log(err);
          this.$message({
            type: 'info',
            message: '取消删除'
          })
        })
    },
    //获取数据
    geiInit(page, size) {
      getDindanList(page, size)
        .then(res => {
          this.DindanList = res.data.data;
          this.total = res.data.count
        })
        .catch(err => {
          console.log('获取列表失败：', err);
        });
    },
    currentchange(page) {
      this.geiInit(page, this.size)
    },

  },
  computed: {
    getMoney() {
      // return this.DindanList.reduce((sum, obj) => {
      //   return sum += +obj.money
      // }, 0)
      let data = this.DindanList.reduce((sum, obj) => {
        return sum += +obj.money
      }, 0)
      return parseFloat(data).toFixed(2)
    }
  }
}
</script>


<style lang="scss" scoped>
.listers {
  padding: 0px;

  .tap-had {
    border: 1px solid rgb(228, 228, 228);
    height: 48px;
    background-color: rgba(243, 243, 243);
    line-height: 48px;
    padding: 0 5%;

    .top-btn {
      float: right;
      margin-top: 4px;
    }

    .jine {
      color: red;
      padding-left: 30px;
    }
  }

  .bottmer {
    border: 1px solid rgb(228, 228, 228);
    height: 48px;
    line-height: 48px;

    .shuru {
      padding-left: 40px;
      padding-top: 4px;
    }

  }

  .dindanlist {
    background-color: rgba(243, 243, 243);
    border: 1px solid rgb(228, 228, 228);
    line-height: 50px;
    margin-top: 20px;

    .list-nav {
      padding: 0 20px;

      span {
        color: #666;
      }

      .nav-right {
        float: right;
      }

      .list-btn1,
      .list-btn2 {
        margin-top: 5px;
      }
    }
  }

  .brand-look,
  .brand-edit,
  .brand-del {
    color: #1ABC9C;
  }

  .list-foot {
    border: 1px solid rgb(228, 228, 228);
    height: 48px;
    background-color: rgba(243, 243, 243);
    line-height: 48px;

    .footer {
      float: right;
    }
  }
}
</style>